<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放大镜</title>
		<style type="text/css">
			#img1{
				width: 300px;
				cursor: pointer;
			}
			#img1 img{
				width: 300px;
			}
			#img2{
				width: 300px;
				height: 300px;
				overflow: hidden;
				position: absolute;
				left :310px;
				top:10px;
				display: none;
			}
		</style>
		<script src="./jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>		
		<div id="img1">
			<img src="118.jpg"/>
		</div>
		<div id="img2">
			<img src="118.jpg"/>
		</div>
		<script type="text/javascript">
			$('#img1').mousemove(function(e){	
				//获取当前鼠标相对于盒子位置
				var x = event.pageX - $(this).offset().left;
				var y = event.pageY - $(this).offset().top;
				//console.log(x+':'+y);
				$('#img2').scrollTop(y).scrollLeft(x).show();
			})
			$('#img1').mouseout(function(){
				$('#img2').hide();
			})
		</script>
	</body>
</html>
